<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>UI组件展示</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: linear-gradient(135deg, #E8EAF6 0%, #F3E5F5 50%, #FCE4EC 100%);
            min-height: 100vh;
        }

        .glass-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .component-showcase {
            border: 2px dashed #e5e7eb;
            border-radius: 1.5rem;
            padding: 1.5rem;
            margin-bottom: 1rem;
        }

        /* 手机状态栏占位 */
        .status-bar-spacer {
            height: 28px;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            position: relative;
            z-index: 999;
        }
    </style>
</head>

<body>
    <!-- 手机状态栏占位 -->
    <div class="status-bar-spacer"></div>

    <div class="min-h-screen pb-6">
        <!-- 顶部导航 -->
        <div class="glass-card px-5 py-4 mb-6">
            <div class="flex items-center gap-3">
                <button onclick="history.back()"
                    class="w-10 h-10 bg-white rounded-xl flex items-center justify-center shadow-sm">
                    <i class="fas fa-arrow-left text-gray-700"></i>
                </button>
                <div>
                    <h1 class="text-lg font-bold text-gray-900">UI组件展示</h1>
                    <p class="text-xs text-gray-500">马卡龙配色设计系统</p>
                </div>
            </div>
        </div>

        <div class="px-5">
            <!-- 配色方案 -->
            <section class="mb-8">
                <h2 class="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2">
                    <div
                        class="w-8 h-8 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl flex items-center justify-center">
                        <i class="fas fa-palette text-white text-sm"></i>
                    </div>
                    配色方案
                </h2>

                <div class="glass-card rounded-3xl p-5 shadow-lg">
                    <div class="grid grid-cols-2 gap-3">
                        <div
                            class="bg-gradient-to-br from-green-100 to-green-50 rounded-2xl p-4 border-2 border-white shadow-md">
                            <div class="text-2xl mb-2">🟢</div>
                            <div class="text-sm font-semibold text-gray-900">浅绿色</div>
                            <div class="text-xs text-gray-500">#E8F5E9</div>
                        </div>
                        <div
                            class="bg-gradient-to-br from-orange-100 to-orange-50 rounded-2xl p-4 border-2 border-white shadow-md">
                            <div class="text-2xl mb-2">🟠</div>
                            <div class="text-sm font-semibold text-gray-900">浅橙色</div>
                            <div class="text-xs text-gray-500">#FFF3E0</div>
                        </div>
                        <div
                            class="bg-gradient-to-br from-purple-100 to-purple-50 rounded-2xl p-4 border-2 border-white shadow-md">
                            <div class="text-2xl mb-2">🟣</div>
                            <div class="text-sm font-semibold text-gray-900">浅紫色</div>
                            <div class="text-xs text-gray-500">#F3E5F5</div>
                        </div>
                        <div
                            class="bg-gradient-to-br from-pink-100 to-pink-50 rounded-2xl p-4 border-2 border-white shadow-md">
                            <div class="text-2xl mb-2">🌸</div>
                            <div class="text-sm font-semibold text-gray-900">粉色</div>
                            <div class="text-xs text-gray-500">#FCE4EC</div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 统计卡片 -->
            <section class="mb-8">
                <h2 class="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2">
                    <div
                        class="w-8 h-8 bg-gradient-to-br from-blue-500 to-indigo-500 rounded-xl flex items-center justify-center">
                        <i class="fas fa-chart-bar text-white text-sm"></i>
                    </div>
                    统计卡片
                </h2>

                <div class="glass-card rounded-3xl p-5 shadow-lg mb-4">
                    <div class="grid grid-cols-2 gap-4">
                        <div
                            class="bg-gradient-to-br from-green-100 to-green-50 rounded-3xl p-5 shadow-lg border-2 border-white">
                            <div class="relative">
                                <svg class="w-16 h-16 mx-auto mb-2" viewBox="0 0 36 36">
                                    <circle cx="18" cy="18" r="16" fill="none" stroke="#e5e7eb" stroke-width="3" />
                                    <circle cx="18" cy="18" r="16" fill="none" stroke="#10b981" stroke-width="3"
                                        stroke-dasharray="75.4" stroke-dashoffset="18.85"
                                        style="transform: rotate(-90deg); transform-origin: center;" />
                                </svg>
                                <div class="absolute inset-0 flex items-center justify-center">
                                    <i class="fas fa-pills text-green-600 text-xl"></i>
                                </div>
                            </div>
                            <div class="text-center">
                                <div class="text-3xl font-bold text-green-900 mb-1">24</div>
                                <div class="text-xs text-green-700 font-medium">总药品数</div>
                            </div>
                        </div>

                        <div
                            class="bg-gradient-to-br from-orange-100 to-orange-50 rounded-3xl p-5 shadow-lg border-2 border-white">
                            <div class="relative">
                                <svg class="w-16 h-16 mx-auto mb-2" viewBox="0 0 36 36">
                                    <circle cx="18" cy="18" r="16" fill="none" stroke="#e5e7eb" stroke-width="3" />
                                    <circle cx="18" cy="18" r="16" fill="none" stroke="#f59e0b" stroke-width="3"
                                        stroke-dasharray="75.4" stroke-dashoffset="56.55"
                                        style="transform: rotate(-90deg); transform-origin: center;" />
                                </svg>
                                <div class="absolute inset-0 flex items-center justify-center">
                                    <i class="fas fa-exclamation-triangle text-orange-600 text-xl"></i>
                                </div>
                            </div>
                            <div class="text-center">
                                <div class="text-3xl font-bold text-orange-900 mb-1">2</div>
                                <div class="text-xs text-orange-700 font-medium">即将过期</div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 按钮样式 -->
            <section class="mb-8">
                <h2 class="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2">
                    <div
                        class="w-8 h-8 bg-gradient-to-br from-green-500 to-emerald-500 rounded-xl flex items-center justify-center">
                        <i class="fas fa-mouse-pointer text-white text-sm"></i>
                    </div>
                    按钮样式
                </h2>

                <div class="glass-card rounded-3xl p-5 shadow-lg space-y-3">
                    <button
                        class="w-full py-3 bg-black text-white rounded-2xl font-semibold shadow-lg hover:scale-105 transition-transform">
                        主要按钮 - 黑色
                    </button>

                    <button
                        class="w-full py-3 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-2xl font-semibold shadow-lg hover:scale-105 transition-transform">
                        渐变按钮 - 紫粉色
                    </button>

                    <button
                        class="w-full py-3 bg-white border-2 border-gray-200 text-gray-700 rounded-2xl font-semibold hover:bg-gray-50 transition-all shadow-sm">
                        次要按钮 - 白色
                    </button>

                    <div class="flex gap-2">
                        <button class="flex-1 px-4 py-2 bg-green-100 text-green-700 rounded-xl text-sm font-semibold">
                            成功
                        </button>
                        <button class="flex-1 px-4 py-2 bg-orange-100 text-orange-700 rounded-xl text-sm font-semibold">
                            警告
                        </button>
                        <button class="flex-1 px-4 py-2 bg-red-100 text-red-700 rounded-xl text-sm font-semibold">
                            错误
                        </button>
                    </div>
                </div>
            </section>

            <!-- 图标按钮 -->
            <section class="mb-8">
                <h2 class="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2">
                    <div
                        class="w-8 h-8 bg-gradient-to-br from-orange-500 to-amber-500 rounded-xl flex items-center justify-center">
                        <i class="fas fa-icons text-white text-sm"></i>
                    </div>
                    图标按钮
                </h2>

                <div class="glass-card rounded-3xl p-5 shadow-lg">
                    <div class="grid grid-cols-4 gap-3">
                        <div class="flex flex-col items-center">
                            <div
                                class="w-14 h-14 bg-gradient-to-br from-green-400 to-emerald-500 rounded-2xl flex items-center justify-center mb-2 shadow-lg">
                                <i class="fas fa-pills text-white text-xl"></i>
                            </div>
                            <span class="text-xs text-gray-600">药品</span>
                        </div>

                        <div class="flex flex-col items-center">
                            <div
                                class="w-14 h-14 bg-gradient-to-br from-blue-400 to-indigo-500 rounded-2xl flex items-center justify-center mb-2 shadow-lg">
                                <i class="fas fa-bell text-white text-xl"></i>
                            </div>
                            <span class="text-xs text-gray-600">提醒</span>
                        </div>

                        <div class="flex flex-col items-center">
                            <div
                                class="w-14 h-14 bg-gradient-to-br from-purple-400 to-pink-500 rounded-2xl flex items-center justify-center mb-2 shadow-lg">
                                <i class="fas fa-users text-white text-xl"></i>
                            </div>
                            <span class="text-xs text-gray-600">成员</span>
                        </div>

                        <div class="flex flex-col items-center">
                            <div
                                class="w-14 h-14 bg-gradient-to-br from-orange-400 to-amber-500 rounded-2xl flex items-center justify-center mb-2 shadow-lg">
                                <i class="fas fa-cog text-white text-xl"></i>
                            </div>
                            <span class="text-xs text-gray-600">设置</span>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 列表卡片 -->
            <section class="mb-8">
                <h2 class="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2">
                    <div
                        class="w-8 h-8 bg-gradient-to-br from-pink-500 to-rose-500 rounded-xl flex items-center justify-center">
                        <i class="fas fa-list text-white text-sm"></i>
                    </div>
                    列表卡片
                </h2>

                <div class="glass-card rounded-3xl p-4 shadow-lg space-y-3">
                    <div class="flex items-center gap-4 p-3 bg-gradient-to-r from-blue-50 to-purple-50 rounded-2xl">
                        <div class="w-12 h-12 bg-white rounded-xl flex items-center justify-center shadow-sm">
                            <span class="text-2xl">💊</span>
                        </div>
                        <div class="flex-1 min-w-0">
                            <div class="font-semibold text-gray-900 text-sm">布洛芬缓释胶囊</div>
                            <div class="text-xs text-gray-500">12:00 · 每次1粒</div>
                        </div>
                        <button class="px-4 py-2 bg-black text-white rounded-xl text-xs font-medium">
                            标记
                        </button>
                    </div>

                    <div class="flex items-center gap-4 p-3 bg-gradient-to-r from-green-50 to-emerald-50 rounded-2xl">
                        <div class="w-12 h-12 bg-white rounded-xl flex items-center justify-center shadow-sm">
                            <span class="text-2xl">🧪</span>
                        </div>
                        <div class="flex-1 min-w-0">
                            <div class="font-semibold text-gray-900 text-sm">维生素C片</div>
                            <div class="text-xs text-gray-500">18:00 · 每次2片</div>
                        </div>
                        <button
                            class="px-4 py-2 bg-white border-2 border-gray-200 text-gray-700 rounded-xl text-xs font-medium">
                            稍后
                        </button>
                    </div>
                </div>
            </section>

            <!-- 输入框 -->
            <section class="mb-8">
                <h2 class="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2">
                    <div
                        class="w-8 h-8 bg-gradient-to-br from-teal-500 to-cyan-500 rounded-xl flex items-center justify-center">
                        <i class="fas fa-keyboard text-white text-sm"></i>
                    </div>
                    输入框
                </h2>

                <div class="glass-card rounded-3xl p-5 shadow-lg space-y-4">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">普通输入框</label>
                        <input type="text" placeholder="请输入内容..."
                            class="w-full px-4 py-3.5 bg-gray-50 border-2 border-gray-100 rounded-2xl text-sm focus:outline-none focus:border-purple-300 focus:bg-white transition-all">
                    </div>

                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">搜索框</label>
                        <div class="relative">
                            <i class="fas fa-search absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"></i>
                            <input type="text" placeholder="搜索药品..."
                                class="w-full pl-12 pr-4 py-3.5 bg-white border-2 border-gray-100 rounded-2xl text-sm focus:outline-none focus:border-purple-300 transition-all">
                        </div>
                    </div>
                </div>
            </section>

            <!-- 标签 -->
            <section class="mb-8">
                <h2 class="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2">
                    <div
                        class="w-8 h-8 bg-gradient-to-br from-yellow-500 to-orange-500 rounded-xl flex items-center justify-center">
                        <i class="fas fa-tags text-white text-sm"></i>
                    </div>
                    标签徽章
                </h2>

                <div class="glass-card rounded-3xl p-5 shadow-lg">
                    <div class="flex flex-wrap gap-2">
                        <span class="px-3 py-1.5 bg-green-100 text-green-700 rounded-lg text-xs font-semibold">✓
                            已完成</span>
                        <span class="px-3 py-1.5 bg-orange-100 text-orange-700 rounded-lg text-xs font-semibold">⏰
                            待服用</span>
                        <span class="px-3 py-1.5 bg-red-100 text-red-700 rounded-lg text-xs font-semibold">⚠️ 低库存</span>
                        <span class="px-3 py-1.5 bg-blue-100 text-blue-700 rounded-lg text-xs font-semibold">💊
                            常用药</span>
                        <span class="px-3 py-1.5 bg-purple-100 text-purple-700 rounded-lg text-xs font-semibold">👑
                            VIP</span>
                    </div>
                </div>
            </section>

            <!-- 提示卡片 -->
            <section class="mb-8">
                <h2 class="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2">
                    <div
                        class="w-8 h-8 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-xl flex items-center justify-center">
                        <i class="fas fa-lightbulb text-white text-sm"></i>
                    </div>
                    提示卡片
                </h2>

                <div class="space-y-3">
                    <div class="glass-card rounded-3xl p-5 shadow-lg bg-gradient-to-br from-pink-50 to-purple-50">
                        <div class="flex items-start gap-3">
                            <div
                                class="w-10 h-10 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-xl flex items-center justify-center flex-shrink-0 shadow-lg">
                                <span class="text-xl">💡</span>
                            </div>
                            <div class="flex-1">
                                <h3 class="font-bold text-gray-900 mb-1">健康小贴士</h3>
                                <p class="text-sm text-gray-600 leading-relaxed">
                                    按时服药有助于药物发挥最佳效果，记得定时服用哦！
                                </p>
                            </div>
                        </div>
                    </div>

                    <div
                        class="bg-gradient-to-r from-red-100 to-orange-100 border-2 border-red-200 rounded-3xl p-4 flex items-center gap-3 shadow-lg">
                        <div
                            class="w-12 h-12 bg-white rounded-2xl flex items-center justify-center flex-shrink-0 shadow-sm">
                            <span class="text-2xl">⚠️</span>
                        </div>
                        <div class="flex-1 min-w-0">
                            <div class="text-sm font-bold text-red-900">过期提醒</div>
                            <div class="text-xs text-red-700">维生素C咀嚼片将在1个月内过期</div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</body>

</html>